<script setup>
import { h, onMounted, ref,computed, resolveDirective, withDirectives } from 'vue'
import {
  NButton,
  NCheckbox,
  NCheckboxGroup,
  NForm,
  NFormItem,
  NImage,
  NInput,
  NSpace,
  NSwitch,
  NTag,
  NPopconfirm,
  NLayout,
  NLayoutSider,
  NLayoutContent,
  NTreeSelect,
  useMessage,
  NFlex,
  NAvatar, NSelect, NInputNumber
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
import CrudModal from '@/components/table/CrudModal.vue'
import CrudTable from '@/components/table/CrudTable.vue'
import { getToken } from '@/utils'
import { formatDate, renderIcon } from '@/utils'
import { useCRUD } from '@/composables'
// import { loginTypeMap, loginTypeOptions } from '@/constant/data'
import api from '@/api'
import TheIcon from '@/components/icon/TheIcon.vue'
import { useUserStore } from '@/store'
import default_image from "@/assets/images/mz.jpg";
import * as echarts from 'echarts';
const message = useMessage()
defineOptions({ name: '门店统计' })

const data = reactive({
  range:null,
  datas:[],
  start_time:null,
  end_time:null,
  select:1
});


onMounted(() => {
  select_date(1)
})

function get_datas(){
  api.getSaasSpaceMap({
    start_time:data.start_time,
    end_time:data.end_time
  }).then((res) => {
    data.datas = res.data
  })
}
function select_date(type){
  data.select = type
  if(type===1){
    const today = new Date();
    const todayStart = new Date(today.getFullYear(), today.getMonth(), today.getDate());
    const todayEnd = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999);
    console.log("今日开始时间:", todayStart);
    console.log("今日结束时间:", todayEnd);
    data.start_time = todayStart
    data.end_time = todayEnd
  }
  if(type===2){
    const yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    const yesterdayStart = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate());
    const yesterdayEnd = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), 23, 59, 59, 999);

    console.log("昨日开始时间:", yesterdayStart);
    console.log("昨日结束时间:", yesterdayEnd);
    data.start_time = yesterdayStart
    data.end_time = yesterdayEnd
  }
  if(type===3){
    const today = new Date();
    const dayOfWeek = today.getDay(); // 0 (周日) 到 6 (周六)
    const weekStart = new Date(today.setDate(today.getDate() - dayOfWeek)); // 本周周日
    const weekEnd = new Date(today.setDate(today.getDate() + 6)); // 本周周六

    console.log("本周开始时间:", weekStart);
    console.log("本周结束时间:", weekEnd);

    data.start_time = weekStart
    data.end_time = weekEnd
  }
  if(type===4){
    const today = new Date();
    const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
    const monthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0, 23, 59, 59, 999);

    console.log("本月开始时间:", monthStart);
    console.log("本月结束时间:", monthEnd);

    data.start_time = monthStart
    data.end_time = monthEnd
  }
  if(type===5){
    const today = new Date();
    const lastMonthStart = new Date(today.getFullYear(), today.getMonth() - 1, 1);
    const lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0, 23, 59, 59, 999);

    console.log("上月开始时间:", lastMonthStart);
    console.log("上月结束时间:", lastMonthEnd);


    data.start_time = lastMonthStart
    data.end_time = lastMonthEnd
  }
  if(type===6){
    const today = new Date();
    const yearStart = new Date(today.getFullYear(), 0, 1);
    const yearEnd = new Date(today.getFullYear(), 11, 31, 23, 59, 59, 999);

    console.log("今年开始时间:", yearStart);
    console.log("今年结束时间:", yearEnd);


    data.start_time = yearStart
    data.end_time = yearEnd
  }

  data.range = [data.start_time, data.end_time];
  get_datas()
}

</script>

<template>
  <AppPage :show-footer="false">
    <n-card style="margin-bottom: 15px">
      <n-flex>
        <n-button size="large" :color="data.select===1?'#1a3b7c':''" @click="select_date(1)">今日</n-button>
        <n-button size="large" :color="data.select===2?'#1a3b7c':''" @click="select_date(2)">昨日</n-button>
        <n-button size="large" :color="data.select===3?'#1a3b7c':''" @click="select_date(3)">本周</n-button>
        <n-button size="large" :color="data.select===4?'#1a3b7c':''" @click="select_date(4)">当月</n-button>
        <n-button size="large" :color="data.select===5?'#1a3b7c':''" @click="select_date(5)">上月</n-button>
        <n-button size="large" :color="data.select===6?'#1a3b7c':''" @click="select_date(6)">当年</n-button>
        <n-date-picker size="large" v-model:value="data.range" type="daterange" clearable />
        <n-button size="large" type="primary" @click="get_datas()">
          <template #icon><TheIcon icon="material-symbols:search" :size="18" class="mr-5" /></template>时间段筛选
        </n-button>
      </n-flex>
    </n-card>

    <n-grid x-gap="12" :cols="2">
      <n-gi v-for="item in data.datas">
        <n-card :segmented="{content: true,footer: 'soft'}" >
          <template #header><n-h6 prefix="bar" style="margin: 0">{{item.space_name}}</n-h6></template>
          <template #header-extra><NTag type="primary">{{item.space_status}}</NTag></template>
          <template #footer>
            <n-grid x-gap="12" :cols="3">
              <n-gi v-for="item2 in item.date">
                <n-card embedded class="data_item">
                  <div class="title">{{item2.name}}</div>
                  <div class="title2"><n-number-animation :from="0" :to="item2.value" /><span class="dw">/{{item2.dw}}</span></div>
                </n-card>
              </n-gi>
            </n-grid>
          </template>
        </n-card>
      </n-gi>

    </n-grid>

  </AppPage>
</template>

<style scoped>
.select_day{
  width:120px;
  height: 50px;
  margin-right: 20px;
}
.data_item{
  margin-bottom: 20px;
  background: #f6f7fb;
  .title{
    font-size: 14px;
    color:#797979;
    margin-bottom: 10px;
  }
  .title2{
    font-size: 16px;
    margin-bottom: 10px;
  }
  .dw{
    font-size: 12px;
    color: #ccc;
  }

}
</style>